<template>
  <div v-if="objData.repType == 'image'">
    <div v-loading="tableLoading" class="waterfall">
      <div v-for="item in tableData" :key="item.mediaId" class="waterfall-item">
        <img class="material-img" :src="item.url">
        <p class="item-name">{{ item.name }}</p>
        <el-row class="ope-row">
          <el-button size="mini" type="success" @click="selectMaterial(item)">选择<i class="el-icon-circle-check el-icon--right" /></el-button>
        </el-row>
      </div>
    </div>
    <div
      v-if="tableData.length <= 0 && !tableLoading"
      class="el-table__empty-block"
    >
      <span class="el-table__empty-text">暂无数据</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <vxe-pager
        :current-page.sync="page.currentPage"
        :page-size.sync="page.pageSize"
        :total="page.total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="currentChange"
      />
    </span>
  </div>
  <div v-else-if="objData.repType == 'voice'">
    <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: refreshChange}" />
    <vxe-table
      ref="xTable"
      border
      resizable
      highlight-hover-row
      :auto-resize="true"
      :data="tableData"
      :loading="tableLoading"
      width
      max-height="500"
    >
      <vxe-table-column width="150" field="mediaId" title="ID" />
      <vxe-table-column min-width="180" field="name" title="名称" />
      <vxe-table-column width="120" field="updateTime" title="更新时间" />
      <vxe-table-column width="100" title="操作" fixed="right" align="center" slots="default">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-circle-plus" size="small" plain @click="selectMaterial(scope.row)">选择</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="page.currentPage"
      :page-size.sync="page.pageSize"
      :total="page.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
      @page-change="currentChange"
    />
  </div>
  <div v-else-if="objData.repType == 'video'">
    <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: refreshChange}" />
    <vxe-table
      ref="xTable"
      border
      resizable
      highlight-hover-row
      :auto-resize="true"
      :data="tableData"
      :loading="tableLoading"
      width
      max-height="500"
    >
      <vxe-table-column width="150" field="mediaId" title="ID" />
      <vxe-table-column min-width="180" field="name" title="名称" />
      <vxe-table-column width="120" field="updateTime" title="更新时间" />
      <vxe-table-column width="100" title="操作" fixed="right" align="center" slots="default">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-circle-plus" size="small" plain @click="selectMaterial(scope.row)">选择</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="page.currentPage"
      :page-size.sync="page.pageSize"
      :total="page.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
      @page-change="currentChange"
    />
  </div>
  <div v-else-if="objData.repType == 'news'">
    <div v-loading="tableLoading" class="waterfall">
      <div
        v-for="item in tableData"
        v-show="item.content && item.content.articles"
        :key="item.mediaId"
        class="waterfall-item"
      >
        <WxNews :obj-data="item.content.articles" />
        <el-row class="ope-row">
          <el-button size="mini" type="success" @click="selectMaterial(item)">选择<i class="el-icon-circle-check el-icon--right" /></el-button>
        </el-row>
      </div>
    </div>
    <div v-if="tableData.length <= 0 && !tableLoading" class="el-table__empty-block">
      <span class="el-table__empty-text">暂无数据</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <vxe-pager
        :current-page.sync="page.currentPage"
        :page-size.sync="page.pageSize"
        :total="page.total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="currentChange"
      />
    </span>
  </div>
</template>

<script>
import { listMediaSource } from '@/api/wxMp'
import { tableOptionVoice } from '@/const/crud/wxmp/wxmaterial_voice'
import { tableOptionVideo } from '@/const/crud/wxmp/wxmaterial_video'
import WxNews from '@/components/wechat-mp/wx-news/main.vue'

export default {
  components: { WxNews },
  props: {
    objData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
        ascs: [], // 升序字段
        descs: [] // 降序字段
      },
      tableOptionVoice: tableOptionVoice,
      tableOptionVideo: tableOptionVideo
    }
  },
  computed: {},
  created() {
    this.getPage(this.page)
  },
  mounted() {},
  methods: {
    selectMaterial(item) {
      this.$emit('selectMaterial', item)
    },
    getPage(page, params) {
      this.tableLoading = true
      listMediaSource(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
            type: this.objData.repType
          },
          params
        )
      ).then((response) => {
        this.tableData = response.items
        this.page.total = response.totalCount
        this.page.currentPage = page.currentPage
        this.page.pageSize = page.pageSize
        this.tableLoading = false
      })
    },
    currentChange(val) {
      this.page.currentPage = val.currentPage
      this.getPage(this.page)
    },
    /**
     * 刷新回调
     */
    refreshChange(page) {
      this.getPage(this.page)
    }
  }
}
</script>

<style lang="scss" scoped>
/*瀑布流样式*/
.waterfall {
  width: 100%;
  column-gap: 10px;
  column-count: 5;
  margin: 0 auto;
}
.waterfall-item {
  padding: 10px;
  margin-bottom: 10px;
  break-inside: avoid;
  border: 1px solid #eaeaea;
}
.material-img {
  width: 100%;
}
p {
  line-height: 30px;
}
@media (min-width: 992px) and (max-width: 1300px) {
  .waterfall {
    column-count: 3;
  }
  p {
    color: red;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .waterfall {
    column-count: 2;
  }
  p {
    color: orange;
  }
}
@media (max-width: 767px) {
  .waterfall {
    column-count: 1;
  }
}
/*瀑布流样式*/
</style>
